revision:
defines a clipping path, to be used by the "clip-path" property.
a clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
attributes: clipPathUnits
codes:
<svg viewBox="0 0 100 100">
<clipPath id="myClip">
<!-- Everything outside the circle will be clipped and therefore invisible. -->
<circle cx="40" cy="35" r="35" />
</clipPath>
<!-- The original black heart, for reference -->
<path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
<!-- Only the portion of the red heart inside the clip circle is visible. -->
<use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>
used to store graphical objects that will be used at a later time. Objects created inside a <defs> element are not rendered directly. To display them you have to reference them (with a <use> element for example).
codes:
<svg viewBox="0 0 10 7">
<!-- Some graphical objects to use -->
<defs>
<circle id="myCircle" cx="0" cy="0" r="3" />
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="30%" stop-color="gold" />
<stop offset="90%" stop-color="green" />
</linearGradient>
</defs>
<!-- using my graphical objects -->
<use x="5" y="3" href="#myCircle" fill="url('#myGradient')" />
</svg>
is used to stroke an object. It uses one or more pre-defined paths to fill an object.
It repeats the path after a fixed interval in a specified direction to cover the areas to be painted.
Syntax: <hatch x="" y="" pitch="" rotate="" hatchUnits="" hatchContentUnits="" transform="" href="">
attributes: x, y, rotate, transform. href
codes:
<svg viewBox="0 0 400 300">
<defs>
<hatch id="hatch" hatchUnits="userSpaceOnUse" pitch="5" rotate="135">
<hatchpath stroke="#a080ff" stroke-width="4" />
</hatch>
</defs>
<foreignObject x="25" y="2" width="260" height="160" color="Green">
<div>
<br><br>Keep smiling<br><br>
</div>
</foreignObject>
<rect fill="url(#hatch)" stroke="Green" stroke-width="4" x="5%" y="5%" width="30%" height="30%" />
</svg>
lets authors define linear gradients to apply to other SVG elements.
the <linearGradient> element must be nested within a <defs> tag, which is short for "definitions" and contains definition of special elements (such as gradients).
Linear gradients can be defined as horizontal, vertical or angular gradients:1/ horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ; 2/ vertical gradients are created when x1 and x2 are equal and y1 and y2 differ; 3/ angular gradients are created when x1 and x2 differ and y1 and y2 differ
attributes: gradientUnits, gradientTransform, href, spreadMethod, x1, x2, xlink:href, y1, y2
codes:
<svg viewBox="0 0 10 6">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="blue" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="3" r="3" fill="url('#myGradient')" />
</svg>
defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> element.
markers are attached to shapes using the marker-start, marker-mid, and marker-end properties.
attributes: markerHeight, markerUnits, markerWidth, orient, pteserveAspectRatio, refX, refY, viewbox
codes:
<svg viewBox="0 0 100 100">
<defs>
<!-- arrowhead marker definition -->
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6"
markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<!-- simple dot marker definition -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- Coordinate axes with a arrowhead in both direction -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<!-- Data line with polymarkers -->
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" />
</svg>
defines an alpha mask for compositing the current object into the background.
a mask is used/referenced using the "mask property".
attributes: height, maskContentUnits, maskUnits, x, y, width
codes:
<svg viewBox="-10 -10 120 120">
<mask id="myMask">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95
Q10,65,10,35 Z" fill="black" />
</mask>
<polygon points="-10,110 110,110 110,-10" fill="orange" />
<!-- with this mask applied, we "punch" a heart shape hole into the circle -->
<circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>
adds metadata to SVG content. Metadata is structured information about data.
the contents of <metadata> should be elements from other XML namespaces such as RDF, FOAF, etc.
attributes: includes global attributes
defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.
the <pattern> is referenced by the "fill" and/or "stroke" attributes on other graphics elements to fill or stroke those elements with the referenced pattern.
attributes: height, patternContentUnits, patternTransform, patternUnits, preserveAspectRatio, viewbox, width, x, xlink:ref, y
codes:
<svg viewBox="0 0 230 100">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>
lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
the <radialGradient> element must be nested within a <defs> tag, which is short for "definitions" and contains definition of special elements (such as gradients).
attributes: cx, cy, fr, fx, fy, gradientUnits, gradientTransform, href, r, spreadMethod, xlink:href
codes:
<svg viewBox="0 0 10 5">
<defs>
<radialGradient id="myGradient_a">
<stop offset="10%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</radialGradient>
</defs>
<!-- using my radial gradient -->
<circle cx="5" cy="3" r="3" fill="url('#myGradient_a')" />
</svg>
allows to add scripts to an SVG document.
attributes: crossorigin, href, type, xlink:href
codes:
<svg viewBox="0 0 10 7">
<script>
// <![CDATA[
window.addEventListener('DOMContentLoaded', () => {
function getColor () {
const R = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
const G = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
const B = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
return `#${R}${G}${B}`
}
document.querySelector('#trial').addEventListener('click', (e) => {
e.target.style.fill = getColor()
})
})
// ]]>
</script>
<circle id="trial" cx="5" cy="3" r="3" />
</svg>
allows style sheets to be embedded directly within SVG content.
attributes:
codes:
<svg viewBox="0 0 10 6">
<circle id="two" cx="5" cy="3" r="2" />
<style>
#two{
fill: gold;
stroke: maroon;
stroke-width: 1px;
}
</style>
</svg>
is used to define graphical template objects which can be instantiated by a <use> element.
the use of <symbol> elements for graphics that are used multiple times in the same document adds structure and semantics.
Documents that are rich in structure may be rendered graphically, as speech, or as Braille, and thus promote accessibility.
attributes: height, preserveAspectRatio, refX, refY, viewBox, width, x, y
codes:
<svg viewBox="0 0 80 20">
<!-- Our symbol in its own coordinate system -->
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- A grid to materialize our symbol positioning -->
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
fill="none" stroke="pink" />
<!-- All instances of our symbol -->
<use href="#myDot" x="5" y="5" style="opacity:1.0" />
<use href="#myDot" x="20" y="5" style="opacity:0.8" />
<use href="#myDot" x="35" y="5" style="opacity:0.6" />
<use href="#myDot" x="50" y="5" style="opacity:0.4" />
<use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>
provides a human readable name for the SVG content, or a component within it.
the <title> element must be the first child of its parent element, which may be one of the SVG container elements or graphics elements, or the <svg> element itself.
The SVG 1.1 specification specifically mentions the importance of providing a title for the <svg> element.
text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an "aria-labelledby" attribute rather than using the <title> element.
attributes: only includes global attributes
codes:
<svg viewBox="0 0 20 10">
<circle cx="5" cy="5" r="4">
<title>I'm a circle</title>
</circle>
<rect x="11" y="1" width="8" height="8">
<title>I'm a square</title>
</rect>
</svg>